
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <style>
	
	
	
		
		
    #s1  {
		width:700px;
		height:200px;
		background-color:#F00;
		float:left;
		margin-bottom:10px;
	
		
		}
    
   #s2 {
		width:200px;
		height:500px;
		background-color:#0F0;
		float:left;;
		margin-bottom:10px;
		margin-right:10px;
		clear:left;
		
		}
   #s3  {
		width:200px;
		height:500px;
		background-color:#00F;
		float:left;
		margin-bottom:10px;
		
		}
   #s4 {
		width:280px;
		height:500px;
		background-color:#0FF;
		float:left;
		margin-left:10px;	
		}
   #s5  {
		width:700px;
		height:200px;
		background-color:#FF0;
		float:left;
		margin-bottom:10px;
		clear:left;
		
		}
		.father  {
			width:700px;
			margin:0 auto;
			}
 
    
    </style>



</head>

<body>
  <div class="father">
       <div id="s1">上面</div>
       <div id="s2">左面</div>
       <div id="s3">有面</div> 
       <div id="s4">中面</div>  
       <div id="s5">下面</div>
   </div>

</body>
</html>
